<template>
  <Main id="activity" :type="'form'">
    <Title :title="'限时折扣-新建活动'"></Title>

    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="titles">基本信息</div>
      <el-form-item label="活动名称" label-width="100" prop="name">
        <el-input
          v-model="form.name"
          style="width:150px;"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动时间" label-width="100" prop="name">
        <el-radio-group v-model="radio">
          <el-radio :label="1">固定时间</el-radio>
          <el-radio :label="2">周期时间</el-radio>
        </el-radio-group>
        <span
          >&nbsp;&nbsp;&nbsp;&nbsp;活动到期后将自动失效，失效后不可延长&nbsp;&nbsp;&nbsp;&nbsp;</span
        >
        <el-date-picker
          v-model="value"
          type="datetimerange"
          size="small"
          range-separator="/"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          style="width:350px;"
          @change="changetimes"
        >
        </el-date-picker>
      </el-form-item>
      <div class="titles">优惠规则</div>

      <el-form-item label="下单可用折扣" label-width="100" prop="name">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="1">积分</el-checkbox>
          <el-checkbox label="2">余额</el-checkbox>
        </el-checkbox-group>
        <span>&nbsp;&nbsp;仅勾选抵扣方式，可在下单时同时使用</span>
      </el-form-item>
      <el-form-item label="下单使用优惠券" label-width="100" prop="name">
        <el-checkbox-group v-model="check">
          <el-checkbox label="1">优惠券</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="活动价格限购" label-width="100" prop="name1"
        ><i
          class="el-icon-question"
          @mouseenter="showicon = true"
          @mouseout="showicon = false"
        ></i
        >&nbsp;&nbsp;
        <el-input
          v-model="form.name1"
          style="width:150px;"
          size="mini"
        ></el-input
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;输入0表示不限购
      </el-form-item>
      <el-form-item label="原价购买" label-width="100" prop="name1">
        <el-checkbox v-model="checkbuy" label="1"
          >活动进行期间不可原价购买</el-checkbox
        >
        <span
          >默认超出限购或活动价售罄后，买家仍可以原价购买商品，保存后不支持修改</span
        >
      </el-form-item>
      <el-form-item label="订单自动关闭时间" label-width="100" prop="name2">
        <el-input
          v-model="form.name2"
          style="width:150px;"
          size="mini"
        ></el-input
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品按下单减库存，请设置未付款订单自动取消时间及时释放库存，可输入3-360分钟
      </el-form-item>
      <div class="titles">活动宣传</div>
      <el-form-item label="预热时间" label-width="100" prop="name2">
        <el-checkbox v-model="isPreheat" label="1">开启活动预热</el-checkbox>
        <span
          >开启则活动开始前会在商详页展示活动信息（开启模板消息后，用户可设置活动开始提醒）</span
        >
      </el-form-item>
      <el-form-item label="活动标签" label-width="100" prop="name2">
        <el-select
          v-model="select"
          size="mini"
          style="width:150px"
          placeholder="订单编码"
          @change="selectTwoTag"
        >
          <el-option
            v-for="item in optionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span>自定义</span>
        <span>不设置则默认显示“限时折扣”</span>
        <span>显示事例</span>
      </el-form-item>
      <el-form-item label="活动图片页面" label-width="100" prop="name2">
        <div style="width:400px;  margin-left: 20px;">
          <img
            :src="Url + pictureCode + $store.state.imgRotate"
            alt=""
            width="100%"
            height="200px"
          />
          <span>将会在活动投放页顶部显示，建议尺寸：750px*268px</span>
        </div>

        <el-button size="small" style="position: relative;">
          <big>+</big>上传
          <input
            id="upPic"
            ref="inputUpload"
            type="file"
            multiple="multiple"
            style="position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    width: 62px;"
            @change="inputUpload($event)"
          />
        </el-button>
      </el-form-item>
      <el-form-item label="活动说明" label-width="100" prop="name2">
        <div style="margin-left: 20px; margin-top:8px;">
          <el-input
            v-model="text"
            type="textarea"
            placeholder="请输入内容"
            style="width:40%;"
            :autosize="{ minRows: 4, maxRows: 8 }"
            maxlength="30"
            show-word-limit
          >
          </el-input>
        </div>
        <div style="margin-left: 15px;margin-top: 80px;">
          <span>剩余可输入100字，不填则不显示</span>
        </div>
      </el-form-item>
    </el-form>
    <div v-if="false" class="icon">
      <span
        >活动价限购是指该商品每个用户允许以活动价购买的数量，超过次数量时会提示用户仅可以原价购买（活动级限购及商品级限购同时设置时，以数量低的生效）</span
      >
    </div>
    <Footer class="footer">
      <el-button type="primary" @click="shopmanage">编辑并保存活动</el-button>
      <el-button plain @click="quxiao">取消</el-button>
    </Footer>
  </Main>
</template>
<script>
import * as qiniu from "qiniu-js";
import { LIMITADD, UP_TOKEN } from "../service";
export default {
  name: "Activity",
  data() {
    return {
      form: {
        name: "",
        name1: "",
        name2: ""
      },
      checkList: [],
      check: 0,
      checkbuy: false,
      isPreheat: 0,
      radio: 0,
      value: "",
      pictureCode: "",
      limit_id: "",
      qnToken: "",
      showicon: false,
      listcode: [],
      Url: this.$store.state.qiniu,
      text: "请输入活动说明,将展示在活动页面",
      select: "限时折扣",
      optionList: [
        { id: 0, name: "限时折扣" },
        { id: 1, name: "限时抢购" },
        { id: 2, name: "秒杀" }
      ],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 0, max: 15, message: "长度在 0 到 15 个字符", trigger: "blur" }
        ],
        name1: [{ required: true, message: "活动价格限购", trigger: "blur" }]
      }
    };
  },
  created() {
    this.listcode = JSON.parse(this.$route.query.item);
    this.limit_id = this.listcode.limit_id;
    this.form.name = this.listcode.name;
    this.radio = this.listcode.activity_time;
    this.value = [this.listcode.stime, this.listcode.etime];
    // this.value = this.listcode.stime
    // this.value = this.listcode.etime
    this.form.name2 = this.listcode.order_auto_close;
    this.form.name1 = this.listcode.limit_buy;
    this.check = this.listcode.use_coupon;
    this.checkbuy = this.listcode.allow_original;
    this.isPreheat = this.listcode.is_preheat;
    this.select =
      this.listcode.tag_name === 2
        ? "限时抢购"
        : this.listcode.tag_name === 3
        ? "秒杀"
        : "限时折扣";
    this.pictureCode = this.listcode.pic;
    this.text = this.listcode.content;
    this.qiniuTag();
    this.limitaddAPI();
  },
  methods: {
    changetimes(val) {
      this.value = val;
    },
    selectTwoTag() {},
    // 上传
    inputUpload(e) {
      this.$message("正在上传！");
      let file = Array.prototype.slice.call(e.target.files);
      let that = this;
      file.forEach(ele => {
        let lock = this.beforeUpload(ele);
        if (!lock) {
          return;
        }
        let random1 = parseInt(Math.random() * 100000);
        let random2 = parseInt(Math.random() * 100000);
        let time = new Date().getTime();
        let d = ele.name.lastIndexOf(".");
        let hz = ele.name.substring(d);
        let fileName = "" + random1 + random2 + time + hz;
        let observable = qiniu.upload(ele, fileName, this.qnToken);
        observable.subscribe({
          next() {},
          // eslint-disable-next-line handle-callback-err
          error() {
            that.$message.error("上传失败！");
          },
          complete(res) {
            that.pictureCode = res.key;
            that.$message.success("上传成功！");
          }
        });
      });
      this.$refs.inputUpload.value = null;
    },
    async qiniuTag() {
      await UP_TOKEN().then(({ data }) => {
        this.qnToken = data;
      });
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isSVG = file.type === "image/svg+xml";
      const isMP4 = file.type === "video/mp4";
      if (this.file_type === 1 && !isJPG && !isPNG && !isSVG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
        return false;
      }
      if (this.file_type === 2 && !isMP4) {
        this.$message.error("上传视频只能是 MP4 格式!");
        return false;
      }
      return true;
    },
    shopmanage() {
      this.limitaddAPI();
      this.$router.push("/addshop");
    },
    quxiao() {
      this.$router.push("/limit/list");
    },
    async limitaddAPI() {
      await LIMITADD({
        limit_id: this.limit_id,
        name: this.form.name,
        activity_time: this.radio,
        stime: this.value[0],
        etime: this.value[1],
        limit_buy: this.form.name1,
        order_auto_close: this.form.name2,
        order_deduction: this.checkList,
        use_coupon: this.check ? 1 : 0,
        allow_original: this.checkbuy ? 1 : 0,
        is_preheat: this.isPreheat ? 1 : 0,
        tag_name: this.select,
        file: this.pictureCode,
        content: this.text
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.titles {
  width: 100px;
  height: 50px;
  line-height: 50px;
}
.bianji {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  .activity-header {
    height: 54px;
    line-height: 54px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 35px;
    background-color: rgba(255, 255, 255, 1);
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    font-size: 14px;
  }
  .activity-title {
    width: 97%;
    margin-left: 30px;
    height: 220px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    .title {
      line-height: 25px;
      padding-top: 10px;
      margin-left: 30px;
      font-size: 14px;
    }
    .form-title {
      padding-top: 10px;
      margin-left: 30px;
    }
    .activity-time {
      margin-left: 32px;
      display: flex;
      font-size: 14px;
      color: #606266;
    }
    .selecttime {
      margin-top: 20px;
      margin-left: 105px;
    }
  }
  .message {
    line-height: 25px;
    padding-top: 10px;
    margin-left: 30px;
    font-size: 14px;
  }
  .activity-message {
    width: 97%;
    margin-left: 30px;
    height: 250px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    margin-top: 10px;

    .message-a {
      margin-top: 10px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
      display: flex;
    }
    .youhui {
      margin-top: 10px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
      display: flex;
    }
    .message-b {
      margin-top: 10px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
    }
    .meassage-c {
      margin-left: 65px;
      font-size: 14px;
      color: #606266;
      display: flex;
    }
    .message-d {
      margin-top: 15px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
    }
  }
  .activity-live {
    width: 97%;
    margin-left: 30px;
    height: 550px;
    background: inherit;
    background-color: rgba(241, 241, 241, 1);
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    .live {
      line-height: 25px;
      padding-top: 10px;
      margin-left: 30px;
      font-size: 14px;
    }
    .live-a {
      margin-top: 10px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
      display: flex;
    }
    .live-b {
      margin-top: 15px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
      line-height: 25px;
      display: flex;
    }
    .live-c {
      margin-top: 15px;
      font-size: 14px;
      color: #606266;
      line-height: 25px;
      display: flex;
    }
    .live-d {
      margin-top: 15px;
      margin-left: 30px;
      font-size: 14px;
      color: #606266;
      line-height: 25px;
      display: flex;
    }
  }
  .icon {
    width: 141px;
    height: 200px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    font-size: 14px;
    color: #606266;
    position: absolute;
    background: #fff;
    padding: 5px;
    top: 201px;
    left: 169px;
    z-index: 1;
  }
  .footer {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 90px;
    line-height: 76px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
    z-index: 100;
  }
}
</style>
